<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
import { getDeviceCopiesApi, DeviceModel } from '@/api/products/device';

// 定义props
const props = defineProps<{
  deviceNo: string;
  modelValue?: string[];
}>();

// 定义emits
const emit = defineEmits<{
  (e: 'update:modelValue', value: string[]): void;
}>();

const { t } = useI18n();

// 启用状态
const enabled = ref(false);
// 加载状态
const loading = ref(false);
// 设备列表数据
const deviceList = ref<DeviceModel[]>([]);
// 选中的设备编号
const selectedDevices = ref<string[]>([]);

// 监听modelValue变化，同步选中状态
watch(
  () => props.modelValue,
  (newValue) => {
    if (newValue) {
      selectedDevices.value = [...newValue];
    }
  },
  { immediate: true }
);

// 监听选中设备变化，emit更新事件
watch(
  selectedDevices,
  (newValue) => {
    emit('update:modelValue', newValue);
  },
  { deep: true }
);

// 监听启用状态变化
watch(
  enabled,
  (newEnabled) => {
    if (newEnabled) {
      // 启用时加载数据
      loadDevices();
    } else {
      // 禁用时清空选中并emit空数组
      selectedDevices.value = [];
      emit('update:modelValue', []);
    }
  }
);

// 监听deviceNo变化，如果启用则重新加载
watch(
  () => props.deviceNo,
  (newDeviceNo) => {
    if (enabled.value && newDeviceNo) {
      loadDevices();
    }
  }
);

// 加载设备数据
const loadDevices = async () => {
  if (!props.deviceNo) {
    ElMessage.warning(t('device.copyDevices.noDeviceNo'));
    return;
  }

  loading.value = true;
  try {
    const response = await getDeviceCopiesApi({ deviceNo: props.deviceNo });
    if (response.data?.list) {
      deviceList.value = response.data.list;
    } else {
      deviceList.value = [];
    }
  } catch (error) {
    ElMessage.error(t('common.error') + (error as Error).message);
    console.error('Failed to load devices:', error);
    deviceList.value = [];
  } finally {
    loading.value = false;
  }
};

// 处理设备选择变化
const handleDeviceChange = (values: string[]) => {
  selectedDevices.value = values;
};
</script>

<template>
  <div class="copy-devices-container">
    <div class="enable-control">
      <el-switch
        v-model="enabled"
        :active-text="t('device.copyDevices.enabled')"
        :inactive-text="t('device.copyDevices.disabled')"
        style="margin-bottom: 15px;"
      />
    </div>
    
    <div v-if="enabled" class="device-selector">
      <el-select
        v-model="selectedDevices"
        multiple
        filterable
        :placeholder="t('device.copyDevices.selectPlaceholder')"
        :loading="loading"
        @change="handleDeviceChange"
        style="width: 100%;"
      >
        <el-option
          v-for="device in deviceList"
          :key="device.deviceNo"
          :label="`${device.name}(${device.deviceNo})`"
          :value="device.deviceNo"
        />
      </el-select>
    </div>
  </div>
</template>

<style scoped lang="scss">
.copy-devices-container {
  padding: 10px 0;
}

.enable-control {
  margin-bottom: 15px;
}

.device-selector {
  width: 100%;
}
</style>
